<template>
    <div id="cc">
        <div style="position: sticky;top:0;z-index: 9999;background: #fff;">
            <div style="display: flex;flex-direction: row;height: 40px;">
                <div
                        style="display: flex;justify-content: center;align-items: center;width: 25vw;
                        font-family: PingFangSC-Regular;font-size: 14px;"
                        :style="{borderBottom:activeStep==index?'2px solid #454592':'1px solid #ddd',color:activeStep==index?'#454592':'#333'}"
                        v-for="(item,index) in ['基本','疾病','合病症','治疗']"
                        @click="privilegeHeadClick('anchor-'+index)">
                    <span>
                      {{item}}
                    </span>
                </div>
            </div>
        </div>
        <div class="wrapper" id="section">
            <!--基本信息-->
            <div id="anchor-0" class="privilege-wrap">
                <!--标题-->
                <div class="title">
                    <div class="title_block"></div>
                    <div class="title_text">
                        基本信息
                    </div>
                </div>
                <!--field-->
                <div class="field_item">
                    <div class="field_title">
                        年龄
                    </div>
                    <div>
                        <Field v-model="form.tabBasic.B02" type="number"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        体重(kg)
                    </div>
                    <div>
                        <Field v-model="form.tabBasic.B04" type="number"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        性别
                    </div>
                    <div>
                        <Cell is-link :title="form.tabBasic.B03" @click="genderShow=true"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        地点
                    </div>
                    <div>
                        <Cell is-link :title="form.tabBasic.B01" @click="B01Show=true"/>
                    </div>
                </div>


            </div>
            <Overlay :show="genderShow">
                <RadioList :fullList="genderOptions" :checked="form.tabBasic.B03" @confirm="genderConfirm"
                           @cancel="genderShow=false"/>
            </Overlay>

            <Overlay :show="B01Show">
                <RadioList :fullList="B01Options" :checked="form.tabBasic.B01" @confirm="B01Confirm"
                           @cancel="B01Show=false"/>
            </Overlay>

            <!--基本信息-->
            <!--疾病信息-->
            <div class="mt20 privilege-wrap" id="anchor-1">
                <!--标题-->
                <div class="title">
                    <div class="title_block"></div>
                    <div class="title_text">
                        疾病信息
                    </div>
                </div>
                <!--field-->

                <div class="field_item">
                    <div class="field_title">
                        心率（次/分钟）
                    </div>
                    <div>
                        <Cell is-link :title="form.tabDisease.D13" @click="heartRateShow=true"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        血肌酐清除率（ml/min）
                    </div>
                    <div>
                        <Cell is-link :title="form.tabDisease.D19" @click="D19Show=true"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        尿素氮(mmol/L)
                    </div>
                    <div>
                        <Cell is-link :title="form.tabDisease.D31" @click="D31Show=true"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        D-2聚体（mg/L）
                    </div>
                    <div>
                        <Cell is-link :title="form.tabDisease.D32" @click="D32Show=true"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        凝血酶原时间
                    </div>
                    <div>
                        <Cell is-link :title="form.tabDisease.D33" @click="D33Show=true"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        活化部分凝血酶原时间
                    </div>
                    <div>
                        <Cell is-link :title="form.tabDisease.D34" @click="D34Show=true"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        血浆抗凝血酶III活性
                    </div>
                    <div>
                        <Cell is-link :title="form.tabDisease.D36" @click="D36Show=true"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        甲状旁腺激素(pg/mL)
                    </div>
                    <div>
                        <Cell is-link :title="form.tabDisease.D37" @click="D37Show=true"/>
                    </div>
                </div>
                <div class="field_item">
                    <div class="field_title">
                        血肌酐mg/dL （mol/L）
                    </div>
                    <div>
                        <Cell is-link :title="form.tabDisease.D18" @click="serumCreatinineShow=true"/>
                    </div>
                </div>

                <div class="field_item">
                    <div class="field_title">
                        eGFR(ml/min/1.73m2)
                    </div>
                    <div>
                        <Field v-model="form.tabDisease.D30" type="number"/>
                    </div>
                </div>

                <div class="field_item">
                    <div class="field_title">
                        25羟基维生素D(nmol/L)
                    </div>
                    <div>
                        <Cell is-link :title="form.tabDisease.D35" @click="D35Show=true"/>
                    </div>
                </div>

            </div>

            <Overlay :show="heartRateShow">
                <RadioList :fullList="heartRateOptions" :checked="form.tabDisease.D13" @confirm="heartRateConfirm"
                           @cancel="heartRateShow=false"/>
            </Overlay>

            <Overlay :show="D32Show">
                <RadioList :fullList="D32Options" :checked="form.tabDisease.D32" @confirm="D32Confirm"
                           @cancel="D32Show=false"/>
            </Overlay>

            <Overlay :show="D33Show">
                <RadioList :fullList="D33Options" :checked="form.tabDisease.D33" @confirm="D33Confirm"
                           @cancel="D33Show=false"/>
            </Overlay>

            <Overlay :show="D34Show">
                <RadioList :fullList="D34Options" :checked="form.tabDisease.D34" @confirm="D34Confirm"
                           @cancel="D34Show=false"/>
            </Overlay>

            <Overlay :show="D36Show">
                <RadioList :fullList="D36Options" :checked="form.tabDisease.D36" @confirm="D36Confirm"
                           @cancel="D36Show=false"/>
            </Overlay>

            <Overlay :show="D37Show">
                <RadioList :fullList="D37Options" :checked="form.tabDisease.D37" @confirm="D37Confirm"
                           @cancel="D37Show=false"/>
            </Overlay>

            <Overlay :show="serumCreatinineShow">
                <RadioList :fullList="serumCreatinineOptions" :checked="form.tabDisease.D18" @confirm="serumCreatinineConfirm"
                           @cancel="serumCreatinineShow=false"/>
            </Overlay>

            <Overlay :show="D19Show">
                <RadioList :fullList="D19Options" :checked="form.tabDisease.D19" @confirm="D19Confirm"
                           @cancel="D19Show=false"/>
            </Overlay>
            <Overlay :show="D31Show">
                <RadioList :fullList="D31Options" :checked="form.tabDisease.D31" @confirm="D31Confirm"
                           @cancel="D31Show=false"/>
            </Overlay>
            <Overlay :show="D35Show">
                <RadioList :fullList="D35Options" :checked="form.tabDisease.D35" @confirm="D35Confirm"
                           @cancel="D35Show=false"/>
            </Overlay>

            <!--疾病信息-->
            <!--合并症信息-->
            <div class="mt20 privilege-wrap" id="anchor-2">
                <!--标题-->
                <div class="title">
                    <div class="title_block"></div>
                    <div class="title_text">
                        合并症信息
                    </div>
                </div>
                <!--field-->

                <div class="field_item">
                    <div class="field_title">
                        伴发疾病及既往史(多选)
                    </div>
                    <div>
                        <Cell is-link :title="form.tabComplication.C15.join(',')" @click="diseaseHistoryShow=true"/>
                    </div>
                </div>
                <div v-if="form.tabComplication.C15.includes('高血压')">
                    <div class="title_sub">
                        高血压
                    </div>
                    <div class="field_item">
                        <div class="field_title">
                            舒张压(mmHg)
                        </div>
                        <div>
                            <Field v-model="form.tabComplication.C14" type="number"/>
                        </div>
                    </div>
                    <div class="field_item">
                        <div class="field_title">
                            收缩压(mmHg)
                        </div>
                        <div>
                            <Field v-model="form.tabComplication.C13" type="number"/>
                        </div>
                    </div>
                </div>
                <div v-if="form.tabComplication.C15.includes('糖尿病')">
                    <div class="title_sub">
                        糖尿病
                    </div>
                    <div class="field_item">
                        <div class="field_title">
                            当前治疗方案
                        </div>
                        <div>
                            <Cell is-link :title="form.tabComplication.C01"
                                  @click="currentTherapeuticShow=true"/>
                        </div>
                    </div>
                    <div class="field_item" v-if="form.tabComplication.C01 == '仅OAD'">
                        <div class="field_title">
                            仅二甲双胍控制
                        </div>
                        <div>
                            <Cell is-link :title="form.tabComplication.C02"
                                  @click="metformincontrolShow=true"/>
                        </div>
                    </div>
                    <div class="field_item">
                        <div class="field_title">
                            空腹血糖(mmol/L)
                        </div>
                        <div>
                            <Field v-model="form.tabComplication.C10" type="number"/>
                        </div>
                    </div>
                    <div class="field_item">
                        <div class="field_title">
                            餐后血糖(mmol/L)
                        </div>
                        <div>
                            <Field v-model="form.tabComplication.C11" type="number"/>
                        </div>
                    </div>
                    <div class="field_item">
                        <div class="field_title">
                            糖化血红蛋白(%)
                        </div>
                        <div>
                            <Field v-model="form.tabComplication.C12" type="number"/>
                        </div>
                    </div>
                </div>
                <div v-if="form.tabComplication.C15.includes('高磷血症')">
                    <div class="title_sub">
                        高血磷症
                    </div>
                    <div class="field_item">
                        <div class="field_title">
                            血钙水平(mmol/L)
                        </div>
                        <div>
                            <Field v-model="form.tabComplication.C05" type="number"/>
                        </div>
                    </div>
                    <div class="field_item">
                        <div class="field_title">
                            血磷水平(mmol/L)
                        </div>
                        <div>
                            <Field v-model="form.tabComplication.C06" type="number"/>
                        </div>
                    </div>
                </div>

            </div>

            <Overlay :show="diseaseHistoryShow">
                <CheckboxList :fullList="diseaseHistoryOptions" :checked="form.tabComplication.C15"
                              @confirm="diseaseHistoryconfirm" @cancel="diseaseHistoryShow = false"/>
            </Overlay>

            <Overlay :show="currentTherapeuticShow">
                <RadioList :fullList="currentTherapeuticOption" :checked="form.tabComplication.C01" @confirm="currentTherapeuticConfirm"
                           @cancel="currentTherapeuticShow=false"/>
            </Overlay>

            <Overlay :show="metformincontrolShow">
                <RadioList :fullList="metformincontrolOptions" :checked="form.tabComplication.C02" @confirm="metformincontrolConfirm"
                           @cancel="metformincontrolShow=false"/>
            </Overlay>

            <!--合并症信息-->
            <!--治疗信息-->
            <div class="mt20 privilege-wrap" id="anchor-3">
                <!--标题-->
                <div class="title">
                    <div class="title_block"></div>
                    <div class="title_text">
                        治疗信息
                    </div>
                </div>
                <!--field-->

                <div class="field_item">
                    <div class="field_title">
                        克赛用法用量
                    </div>
                    <div>
                        <Cell is-link :title="form.treatment.T06" @click="T06Show=true"/>
                    </div>
                </div>


            </div>
            <Overlay :show="T06Show">
                <RadioList :fullList="T06Options" :checked="form.treatment.T06" @confirm="T06Confirm"
                           @cancel="T06Show=false"/>
            </Overlay>


            <!--治疗信息-->
            <!--保存按钮-->
            <div class="submit">
                <div class="submit_btn" @click="save">
                    保存
                </div>
            </div>
            <div class="submit_btn2" @click="submit">
                提交
            </div>
        </div>
        <div>
            <img :src="cloud_img" style="width: 100%"/>
        </div>
    </div>

</template>

<script>
    import {
        Field,
        Cell,
        CellGroup,
        Popup,
        Picker,
        Toast,
        Overlay,
        Checkbox,
        CheckboxGroup
    } from 'vant';
    import cloud_img from '@assets/image/cloud.svg'
    import RadioList from "@components/snfRadioList/index"
    import CheckboxList from "@components/snfCheckboxList/index"
    const genderOptions = ['男', '女']
    const B01Options = ['门诊', '病房']


    const heartRateOptions = ['<50', '50-69', '70-89', '90-109', '110-149', '150-199', '≥200']
    const D32Options = ['<5', '5-9', '≥9']
    // const electrocardiogramOptions = ['ST抬高','ST压低','T波倒置','病理性Q波','无明显变化']
    const D33Options = ['＜11s', '11s-13s', '≥13s']
    const D34Options = ['＜25s', '25-35s', '＞35s']
    const D36Options = ['≥120%', '100%-120%', '80%-100%', '60%-80%', '40%-60%', '＜40%']
    const D37Options = ['<70', '≥70']
    const serumCreatinineOptions = ['0-0.39 (0-34)', '0.40-0.79 (35-70)', '0.80-1.19 (71-105)', '1.20-1.59 (106-141)', '1.60-1.99 (142-176)', '2.00-3.99 (177-353)', '≥4.0 (≥354)']
    const D19Options = ['≤30', '＞30']
    const D31Options = ['＜2.86', '2.86-7.14', '≥7.15']
    const D35Options = ['<12.5', '12.5-50', '50-75', '75- 150',  '>250 ']
    const diseaseHistoryOptions = ['糖尿病', '高血压', '高血脂', '贫血', '营养不良', '肥胖', '高磷血症', '血管钙化', '瓣膜钙化', '其他', '无']
    const currentTherapeuticOption = ['新诊断/未治疗', '仅OAD', '基础+OAD', '基础追加', '基础餐时', '短期强化', '其他']
    const metformincontrolOptions = ['是', '否']
    const T06Options = ['无高度出血倾向：动脉血管通路给予克赛100Axa IU/kg', '有高度出血倾向：双侧血管通路给予克赛50Axa IU/kg,单侧血管通路给予克赛75Axa IU/kg ',
        '若患者抗凝治疗后出现纤维蛋白环时：再给予50-100Axa IU/kg ']
    export default {
        name: "add",
        props: {
            scheduleId: String,
            tabActive: Number
        },
        components: {
            RadioList,
            CheckboxList,
            Field,
            Cell,
            Popup,
            Picker,
            Toast,
            Overlay,
            Checkbox,
            CheckboxGroup,
            CellGroup
        },
        data() {
            return {
                active: '',
                activeStep: '',
                form: {
                    finish: false,
                    callPlanId: this.scheduleId,
                    prodName: '克赛 血液透析 ',
                    prodId: 'CLEXAN_HD',
                    tabBasic: {
                        B02: '',
                        B03: '',
                        B04: '',
                        B01: ''
                    },
                    tabDisease: {
                        D13: '',
                        D32: '',
                        D33: '',
                        D34: '',
                        D36: '',
                        D37: '',
                        D30: '',
                        D18: '',
                        D19: '',
                        D31: '',
                        D35: '',
                    },
                    tabComplication: {
                        C15: [],
                        C14: '',
                        C13: '',
                        C01: '',
                        C02: '',
                        C10: '',
                        C11: '',
                        C12: '',
                        C05: '',
                        C06: ''
                    },
                    treatment: {
                        T06: ''
                    }
                },
                genderShow: false,
                B01Show: false,


                heartRateShow: false,
                D32Show: false,
                // electrocardiogramShow : false,
                D33Show: false,
                D34Show: false,
                D36Show: false,
                D37Show: false,
                serumCreatinineShow: false,
                D19Show: false,
                D31Show: false,
                D35Show: false,
                diseaseHistoryShow: false,
                currentTherapeuticShow: false,
                metformincontrolShow: false,
                T06Show: false,
                genderOptions: genderOptions,
                B01Options: B01Options,
                heartRateOptions: heartRateOptions,
                D32Options: D32Options,
                // electrocardiogramOptions : electrocardiogramOptions,
                D33Options: D33Options,
                D34Options: D34Options,
                D36Options: D36Options,
                D37Options: D37Options,
                serumCreatinineOptions: serumCreatinineOptions,
                D19Options: D19Options,
                D31Options: D31Options,
                D35Options: D35Options,
                diseaseHistoryOptions: diseaseHistoryOptions,
                currentTherapeuticOption: currentTherapeuticOption,
                metformincontrolOptions: metformincontrolOptions,
                T06Options: T06Options,
                cloud_img: cloud_img
            }
        },
        methods: {
            diseaseHistoryconfirm(value, index) {
                this.form.tabComplication.C15 = value
                this.diseaseHistoryShow = false
            },
            onScroll(e) {
                let scrollItems = document.querySelectorAll(".privilege-wrap");
                for (let i = scrollItems.length - 1; i >= 0; i--) {
                    // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
                    let judge =
                        e.target.scrollTop >=
                        scrollItems[i].offsetTop - scrollItems[0].offsetTop;
                    if (judge) {
                        this.activeStep = i;
                        this.active = this.activeStep
                        break;
                    }
                }
            },
            privilegeHeadClick(anchor) {
                this.$nextTick(() => {
                    document.querySelector(`#${anchor}`).scrollIntoView({
                        behavior: "smooth", // 平滑过渡
                        block: "start" // 上边框与视窗顶部平齐。默认值
                    });
                });
            },
            // electrocardiogramtoggle(index){
            //     this.$refs.electrocardiogramtogglecheckboxes[index].toggle();
            // },
            toggle(index) {
                this.$refs.checkboxes[index].toggle();
            },
            genderConfirm(value, index) {
                this.form.tabBasic.B03 = value
                this.genderShow = false
            },
            B01Confirm(value, index) {
                this.form.tabBasic.B01 = value
                this.B01Show = false
            },

            heartRateConfirm(value, index) {
                this.form.tabDisease.D13 = value
                this.heartRateShow = false
            },
            D32Confirm(value, index) {
                this.form.tabDisease.D32 = value
                this.D32Show = false
            },
            D33Confirm(value, index) {
                this.form.tabDisease.D33 = value
                this.D33Show = false
            },
            D34Confirm(value, index) {
                this.form.tabDisease.D34 = value
                this.D34Show = false
            },
            D36Confirm(value, index) {
                this.form.tabDisease.D36 = value
                this.D36Show = false
            },
            D37Confirm(value, index) {
                this.form.tabDisease.D37 = value
                this.D37Show = false
            },
            serumCreatinineConfirm(value, index) {
                this.form.tabDisease.D18 = value
                this.serumCreatinineShow = false
            },
            D19Confirm(value, index) {
                this.form.tabDisease.D19 = value
                this.D19Show = false
            },
            D31Confirm(value, index) {
                this.form.tabDisease.D31 = value
                this.D31Show = false
            },
            D35Confirm(value, index) {
                this.form.tabDisease.D35 = value
                this.D35Show = false
            },
            currentTherapeuticConfirm(value, index) {
                this.form.tabComplication.C01 = value
                this.currentTherapeuticShow = false
            },
            metformincontrolConfirm(value, index) {
                this.form.tabComplication.C02 = value
                this.metformincontrolShow = false
            },
            T06Confirm(value, index) {
                this.form.treatment.T06 = value
                this.T06Show = false
            },
            saveCheck() {
                if (!this.form.tabBasic.B01) {
                    alert("请选择地点！")
                    return false
                }
                if (!this.form.tabBasic.B02) {
                    alert("请输入年龄！")
                    return false
                }
                if (!this.form.tabBasic.B03) {
                    alert("请选择性别！")
                    return false
                }
                if (!this.form.tabBasic.B04) {
                    alert("请输入体重！")
                    return false
                }
                if (!this.form.tabDisease.D13) {
                    alert("请选择心率！")
                    return false
                }
                if (!this.form.tabDisease.D18) {
                    alert("请选择血肌酐！")
                    return false
                }
                if (!this.form.tabDisease.D19) {
                    alert("请选择血肌酐清除率！")
                    return false
                }
                if (!this.form.tabDisease.D30) {
                    alert("请输入eGFR！")
                    return false
                }
                if (!this.form.tabDisease.D31) {
                    alert("请选择尿素氮！")
                    return false
                }
                if (!this.form.tabDisease.D32) {
                    alert("请选择D-2聚体！")
                    return false
                }
                if (!this.form.tabDisease.D33) {
                    alert("请选择凝血酶原时间！")
                    return false
                }
                if (!this.form.tabDisease.D34) {
                    alert("请选择活化部分凝血酶原时间！")
                    return false
                }
                if (!this.form.tabDisease.D35) {
                    alert("请选择25羟基维生素D！")
                    return false
                }
                if (!this.form.tabDisease.D36) {
                    alert("请选择血浆抗凝血酶III活性！")
                    return false
                }
                if (!this.form.tabDisease.D37) {
                    alert("请选择甲状旁腺激素！")
                    return false
                }
                if (!this.form.treatment.T06) {
                    alert("请选择克赛用法用量！")
                    return false
                }
                if (this.form.tabComplication.C15.length < 1) {
                    alert("请选择伴发疾病及既往史！")
                    return false
                }
                if (this.form.tabComplication.C15.includes('高血压')) {
                    if (!this.form.tabComplication.C13) {
                        alert("请输入收缩压！")
                        return false
                    }
                    if (!this.form.tabComplication.C14) {
                        alert("请输入舒张压！")
                        return false
                    }
                }
                if (this.form.tabComplication.C15.includes('高磷血症')) {
                    if (!this.form.tabComplication.C05) {
                        alert("请输入血钙水平！")
                        return false
                    }
                    if (!this.form.tabComplication.C06) {
                        alert("请输入血磷水平！")
                        return false
                    }
                }
                if (this.form.tabComplication.C15.includes('糖尿病')) {
                    if (!this.form.tabComplication.C01) {
                        alert("请选择当前治疗方案！")
                        return false
                    }
                    if (!this.form.tabComplication.C10) {
                        alert("请输入空腹血糖！")
                        return false
                    }
                    if (!this.form.tabComplication.C11) {
                        alert("请输入餐后血糖！")
                        return false
                    }
                    if (!this.form.tabComplication.C12) {
                        alert("请输入糖化血红蛋白！")
                        return false
                    }
                }
                if (this.form.tabComplication.C01 == '仅OAD') {
                    if (!this.form.tabComplication.C02) {
                        alert("请选择仅二甲双胍控制！")
                        return false
                    }
                }
                return true
            },
            save() {
                this.form.finish = false
                this.$emit('save', Object.assign({}, this.form))
                this.$nextTick(() => {
                    document.querySelector(`#cc`).scrollIntoView({
                        block: "start" // 上边框与视窗顶部平齐。默认值
                    });
                });
                this.form = {
                    finish: false,
                    callPlanId: this.scheduleId,
                    prodName: '克赛 血液透析',
                    prodId: 'CLEXAN_HD',
                    tabBasic: {
                        B02: '',
                        B03: '',
                        B04: '',
                        B01: ''
                    },
                    tabDisease: {
                        D13: '',
                        D32: '',
                        D33: '',
                        D34: '',
                        D36: '',
                        D37: '',
                        D30: '',
                        D18: '',
                        D19: '',
                        D31: '',
                        D35: ''
                    },
                    tabComplication: {
                        C15: [],
                        C14: '',
                        C13: '',
                        C01: '',
                        C02: '',
                        C10: '',
                        C11: '',
                        C12: '',
                        C05: '',
                        C06: ''
                    },
                    treatment: {
                        T06: ''
                    }
                }
                this.$emit('hide')
            },
            submit(){
                this.form.finish = this.saveCheck()
                if(this.form.finish){
                    this.$emit('save', Object.assign({}, this.form))
                    this.$emit('hide')
                }else{
                    return
                }
                this.$nextTick(() => {
                    document.querySelector(`#cc`).scrollIntoView({
                        block: "start" // 上边框与视窗顶部平齐。默认值
                    });
                });
                this.form = {
                    finish: false,
                    callPlanId: this.scheduleId,
                    prodName: '克赛 血液透析',
                    prodId: 'CLEXAN_HD',
                    tabBasic: {
                        B02: '',
                        B03: '',
                        B04: '',
                        B01: ''
                    },
                    tabDisease: {
                        D13: '',
                        D32: '',
                        D33: '',
                        D34: '',
                        D36: '',
                        D37: '',
                        D30: '',
                        D18: '',
                        D19: '',
                        D31: '',
                        D35: ''
                    },
                    tabComplication: {
                        C15: [],
                        C14: '',
                        C13: '',
                        C01: '',
                        C02: '',
                        C10: '',
                        C11: '',
                        C12: '',
                        C05: '',
                        C06: ''
                    },
                    treatment: {
                        T06: ''
                    }
                }
            }
        },
        mounted() {
        },
        watch: {
            tabActive(newval, oldval) {
                this.activeStep = newval
            },
            'form.tabComplication.C15': {
                handler(newval, oldval) {
                    if (!newval.includes('高血压')) {
                        this.form.tabComplication.C13 = ''
                        this.form.tabComplication.C14 = ''
                    }
                    if (!newval.includes('糖尿病')) {
                        this.form.tabComplication.C01 = ''
                        this.form.tabComplication.C10 = ''
                        this.form.tabComplication.C11 = ''
                        this.form.tabComplication.C12 = ''
                    }
                    if (!newval.includes('高磷血症')) {
                        this.form.tabComplication.C05 = ''
                        this.form.tabComplication.C06 = ''
                    }
                },
                deep: true,
                immediate: true
            },
            'form.tabComplication.C01': {
                handler(newval, oldval) {
                    if (newval != '仅OAD') {
                        this.form.tabComplication.C02 = ''
                    }
                },
                deep: true,
                immediate: true
            }
        }
    }
</script>

<style scoped>
    .wrapper {
        padding: 20px;
    }

    .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        /*margin-bottom: 10px;*/
    }

    .title_block {
        background: #ACB318;
        width: 4px;
        height: 20px;
    }

    .title_text {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0.3px;
        text-align: justify;
        line-height: 24px;
        margin-left: 12px;
    }

    .field_title {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #999999;
        letter-spacing: 0.22px;
        text-align: justify;
        line-height: 16px;
    }

    .field_item {
        margin-top: 10px;
    }

    .title_sub {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #454592;
        letter-spacing: 0.26px;
        text-align: justify;
        margin-top: 20px;
    }

    .submit {
        width: 100%;
        height: 48px;
        display: flex;
        justify-content: center;
        margin-top: 50px;
        margin-bottom: 20px;
    }

    .submit_btn {
        width: 90%;
        height: 48px;
        background: #ACB318;
        border-radius: 2px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    .submit_btn2{
        width: 90%;
        height: 48px;
        background: #454592;
        border-radius: 2px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin: 0 auto;
    }
    .mt20 {
        margin-top: 20px;
    }

    .van-cell {
        padding: 10px 0px !important;
        border-bottom: 1px solid #ddd;
    }
</style>